<template>
  <div class='scroll_x_outbox' :style='{height:height+"px"}'>
    <div class="scroll_x_innerbox">
      <ul class='list_box' :style="{width:list.length*width+'px'}">
        <li
          class='item_box'
          v-for='(item,index) in list'
          :key='index'
          :style="{width:width+'px',height:height+'px'}"
        >
          <slot :data='item'></slot>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
// @ is an alias to /src
export default {
  name: "scrollBox",
  props: {
    width: {
      type: Number,
      default: 120,
    },
    height: {
      type: Number,
      default: 120,
    },
    list: {
      type: Array,
      default() {
        return [];
      },
      required: true,
    },
  },
  data() {
    return {};
  },
  components: {},
};
</script>
<style lang="less">
.scroll_x_outbox {
  height: 150px;
  overflow: hidden;
  .scroll_x_innerbox {
    overflow-x: scroll;
    width: 100%;
    height: 120%;
    .list_box {
      overflow: hidden;
      .item_box {
        float: left;
        width: 120px;
        height: 120px;
      }
    }
  }
}
</style>